<template>

  <el-dialog v-model="dialogVisible" :title="user_id ? '编辑用户' : '添加用户'" width="50%" :before-close="handleClose">


    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" :disabled='user_id ? true : false' />
        </el-form-item>

        <el-form-item label="密码" prop="password" v-show="!user_id">
          <el-input v-model="ruleForm.password" />
        </el-form-item>


        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>


        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>

      </el-form>
    </div>
























    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import { ref, reactive } from 'vue';
import { ElMessageBox } from 'element-plus';
import { addUsers, getUserMsg, updateUser } from "../../../api/user.js";
let dialogVisible = ref(false)

import showElemessage from '../../../tools/showElemessage';

//定义表单数据对象
let ruleForm = reactive({
  username: "",
  password: "",
  email: "",
  phone: ""
})
let handleClose = () => {
  dialogVisible.value = false;
  ruleForm.username = '';
  ruleForm.password = '';
  ruleForm.email = '';
  ruleForm.phone = '';
}
// 定义表单校验规格
let rules = reactive({
  username: { required: true, message: "请您填写用户名", trigger: "blur" },
  password: { required: true, message: "请您填写密码", trigger: "blur" },
  email: { type: "email", required: true, message: "请您填写正确邮箱", trigger: "blur" },
  phone: { required: true, message: "请您填写手机号", trigger: "blur" }
})

let user_id = ref(null)
//定义一个初始化方法
let init = async (id) => {
  dialogVisible.value = true
  if (id){
    //编辑用户
    user_id.value = id;
    rules.password.required = false
    //获取当前要编辑的用户信息
    let res = await getUserMsg(id);
    console.log(res);
    ruleForm.username = res.data.data.username
    ruleForm.phone = res.data.data.mobile
    ruleForm.email = res.data.data.email
            return
  }
  // console.log(id);
  rules.password.required = true;
  user_id.value = null;
}
//将init方法暴露给自钻进
defineExpose({
  init: init
})
//表单实例
let ruleFormRef = ref(null);
let emit = defineEmits('over')
//确定操作
let confirm = () => {
  //表单校验 isVal为true是校验通过
  ruleFormRef.value.validate(async (isVal) => {
    if (isVal)
    {
      if (user_id.value)
      {
        let data = {
          email: ruleForm.email,
          mobile: ruleForm.phone
        }
           let res = await updateUser(user_id.value, data);

        if (res.data.meta.status == 200)
        {
          showElemessage("修改成功", 'success', 2000);
          handleClose()
          //通知父组件添加成功了 您帮我重新请求一次数据
          emit('over')

        } else
        {
          showElemessage(res.data.meta.msg, 'error', 2000)
        }

        return
      }
          // 添加用户了
      let data = {
        //44.00
        username: ruleForm.username,
        password: ruleForm.password,
        email: ruleForm.email,
        mobile: ruleForm.phone
      }
      let res = await addUsers(data);
      console.log(res)
      if (res.data.meta.status == 201)
      {
        showElemessage("添加成功", 'success', 2000);
        handleClose()
        //通知父组件添加成功了 您帮我重新请求一次数据
        emit('over')

      } else
      {
        showElemessage(res.data.meta.msg, 'error', 2000)
      }
    }

  })
}
</script>















<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>